<template>
  <div class="main">
    <el-row>
      <el-col :span="5">
        <left-mouble/>
      </el-col>
      <el-col :span="14">
        <div>{{drag?'拖拽中':'拖拽停止'}}</div>
        <vue-draggable :group='groupA' v-model="myArray" @start="onStart" @end="onEnd">
          <transition-group>
            <div class="item" v-for="item in myArray" :key="item.id">{{item.name}}</div>
          </transition-group>
        </vue-draggable>
      </el-col>
      <el-col :span="5">
        <vue-draggable :grout="groupB" v-model="myArray2" @start="onStart" @end="onEnd">
          <transition-group>
            <div class="item" v-for="item in myArray2" :key="item.id">{{item.name}}</div>
          </transition-group>
        </vue-draggable>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { VueDraggableNext } from "vue-draggable-next";
import LeftMouble from '@/components/draglist/leftMouble.vue';
export default {
  components: {
    VueDraggable: VueDraggableNext,
    LeftMouble,
  },
  data() {
    return {
      drag: false,
      groupA: {
        name: "itxst",
        put: true, //可以拖入
        pull: true
      },
      groupB: {
        name: "itxst",
        pull: "clone", //B组拖拽时克隆到A组
        put: true,
      },
      myArray: [
        { id: 10, name: 'www.itxst.com' },
        { id: 20, name: 'www.baidu.com' },
        { id: 30, name: 'www.taobao.com' },
        { id: 40, name: 'www.yahoo.com' }
      ],
      myArray2: [
        { id: 50, name: 'www.itxst.com2' },
        { id: 60, name: 'www.baidu.com2' },
        { id: 70, name: 'www.taobao.com2' },
        { id: 80, name: 'www.yahoo.com2' }
      ]
    }
  },
  methods: {
    //开始拖拽事件
    onStart(e) {
      console.log("开始",e)
      this.drag = true;
    },
    //拖拽结束事件
    onEnd() {
      this.drag = false;
    },
  },
}
</script>
<style lang="scss" scoped>
.main {
  // /*被拖拽对象的样式*/
  // .item {
  //   padding: 6px;
  //   background-color: #fdfdfd;
  //   border: solid 1px #eee;
  //   margin-bottom: 10px;
  //   cursor: move;
  // }
  /*选中样式*/
  // .chosen {
  //   border: solid 1px #3089dc !important;
  // }
}
</style>